<template>
    <div class="container">
        <van-tabs v-model="tabValue" swipeable @change="tabChange" class="reset">
            <div slot="nav-right">
                <van-button icon="plus" size="normal" type="default" @click="addBtn(tabValue)" plain></van-button>
            </div>
            <!--{{formData.address}}-{{formData.person}}-{{formData.children}}-->
            <van-tab title="多处住所">
                <template v-for="(item, index) in formData.address">
                    <van-cell-group :key="index">
                        <div class="inner-box">
                            <van-row>
                                <van-col span="20">
                                    <div class="suggest van-cell van-field" @click="chooseMap('address', index)">
                                        <div class="address-placeholder">
                                            <span v-if="!item.loc_title && !item.loc_address">请选择地址（{{parseInt(index)+1}}）</span>
                                            <span v-else>&nbsp;</span>
                                        </div>
                                        <div class="van-cell__value">
                                            <div class="address-box">{{item.loc_title}}</div>
                                            <div class="address-box">{{item.loc_address}}</div>
                                        </div>
                                    </div>
                                    <!--<van-field
                                            v-model="item.loc_address"
                                            autosize
                                            readonly
                                            type="textarea"
                                            :placeholder="'请选择地址（' + (parseInt(index)+1) + '）'"
                                            @focus="bodyScrollTop"
                                            @click="chooseMap('address', index)"
                                            use-button-slot
                                    >
                                    </van-field>-->
                                </van-col>
                                <van-col span="4">
                                    <van-button class="del-btn" v-if="index !== 0" size="mini" round icon="cross"
                                                type="danger" @click="delBtn('address', index)" plain
                                                hairline></van-button>
                                </van-col>
                            </van-row>
                        </div>
                    </van-cell-group>
                </template>
                <!--<van-row class="addBox">
                    <van-col offset="19" span="4">
                        <van-button round icon="plus" size="mini" type="info" @click="addBtn('address')"
                                    plain></van-button>
                    </van-col>
                </van-row>-->
                <!--<div class="div-bot">
                    <div class="city-card-common-btn" @click="insertPermitAddress">提交</div>
                </div>-->
            </van-tab>
            <van-tab title="探望亲人">
                <template v-for="(item, index) in formData.person">
                    <van-cell-group :key="index">
                        <div class="inner-box">
                            <van-field
                                    v-model="item.relation"
                                    clearable
                                    @focus="bodyScrollTop"
                                    :placeholder="'请输入探望人（' + (parseInt(index)+1) + '）关系'"
                            >
                            </van-field>
                            <van-field
                                    v-model="item.name"
                                    clearable
                                    @focus="bodyScrollTop"
                                    :placeholder="'请输入探望人（' + (parseInt(index)+1) + '）姓名'"
                            >
                            </van-field>
                            <van-field
                                    v-model="item.cardno"
                                    clearable
                                    @focus="bodyScrollTop"
                                    :placeholder="'请输入探望人（' + (parseInt(index)+1) + '）身份证号'"
                            >
                            </van-field>
                            <van-row>
                                <van-col span="20">
                                    <div class="suggest van-cell van-field" @click="chooseMap('person', index)">
                                        <div class="address-placeholder">
                                            <span v-if="!item.loc_title && !item.loc_address">请选择地址（{{parseInt(index)+1}}）</span>
                                            <span v-else>&nbsp;</span>
                                        </div>
                                        <div class="van-cell__value">
                                            <div class="address-box">{{item.loc_title}}</div>
                                            <div class="address-box">{{item.loc_address}}</div>
                                        </div>
                                    </div>
                                    <!--<van-field
                                            v-model="item.loc_address"
                                            autosize
                                            readonly
                                            type="textarea"
                                            :placeholder="'请选择地址（' + (parseInt(index)+1) + '）'"
                                            @click="chooseMap('person', index)"
                                            @focus="bodyScrollTop"
                                    >
                                    </van-field>-->
                                </van-col>
                                <van-col span="4">
                                    <van-button class="del-btn" v-if="index !== 0" size="mini" round icon="cross"
                                                type="danger" @click="delBtn('person', index)" plain
                                                hairline></van-button>
                                </van-col>
                            </van-row>
                        </div>
                    </van-cell-group>
                </template>
                <!--<van-row class="addBox">
                    <van-col offset="19" span="5">
                        <van-button round icon="plus" size="mini" type="info" @click="addBtn('person')"
                                    plain></van-button>
                    </van-col>
                </van-row>-->
                <!--<div class="div-bot">
                    <div class="city-card-common-btn" @click="insertPermitPerson">提交</div>
                </div>-->
            </van-tab>
            <van-tab title="孩子代办">
                <template v-for="(item, index) in formData.children">
                    <van-cell-group :key="index">
                        <div class="inner-box">
                            <van-field
                                    v-model="item.relation"
                                    clearable
                                    @focus="bodyScrollTop"
                                    :placeholder="'请输入代办关系（' + (parseInt(index)+1) + '）'"
                            >
                            </van-field>
                            <van-row>
                                <van-col span="20">
                                    <van-field
                                            v-model="item.name"
                                            clearable
                                            @focus="bodyScrollTop"
                                            :placeholder="'请输入孩子姓名（' + (parseInt(index)+1) + '）'"
                                    >
                                    </van-field>
                                </van-col>
                                <van-col span="4">
                                    <van-button class="del-btn" v-if="index !== 0" size="mini" round icon="cross"
                                                type="danger" @click="delBtn('children', index)" plain
                                                hairline></van-button>
                                </van-col>
                            </van-row>
                            <van-field
                                    v-model="item.cardno"
                                    clearable
                                    @focus="bodyScrollTop"
                                    :placeholder="'请输入孩子身份证号（' + (parseInt(index)+1) + '）'"
                            >
                            </van-field>
                        </div>
                    </van-cell-group>
                </template>
                <!--<van-row class="addBox">
                    <van-col offset="19" span="5">
                        <van-button round icon="plus" size="mini" type="info" @click="addBtn('children')"
                                    plain></van-button>
                    </van-col>
                </van-row>-->
            </van-tab>

            <van-tab title="" title-style="display: none;"></van-tab>
        </van-tabs>
    </div>
</template>

<script>
import {
  insertPermitAddress,
  insertPermitPerson,
  insertPermitChildren
} from '@/api/yi-qing-fang-kong.js'
// 工具
import { identityCodeValid } from '@/libs/tools'
// vant组件
import {
// Dialog,
// Toast
} from 'vant'
// 获取用户信息
import { getUserLoginInfo } from '@/api/wx-api'

export default {
  name: 'EpidemicOtherHandle',
  data () {
    return {
      tabValue: this.tabIndex,
      tip: '',
      pFlag: false, // 亲人标识
      cFlag: false // 孩子标识
    }
  },
  props: {
    tabIndex: {
      // type: String,
      default: () => {
        return 3
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    tabChange (val, title) {
      // console.log(val, '--', title)
    },
    chooseMap (type, index) {
      this.$router.push({
        name: 'epidemic-map',
        query: {
          type: type,
          index: index,
          formData: this.formData
        }
      })
    },
    // 去苹果机型白边
    bodyScrollTop () {
      document.body && (document.body.scrollTop = 0)
    },
    addBtn (type) {
      let addressLength = this.formData.address.length
      let personLength = this.formData.person.length
      let childrenLength = this.formData.children.length
      console.log('地址长度', addressLength)
      console.log('人员长度', personLength)
      console.log('孩子长度', childrenLength)
      switch (type) {
        case 0:
          if (addressLength > 0 &&
              this.formData.address[addressLength - 1].loc_address !== '') {
            this.formData.address.push({ loc_province: '', loc_city: '', loc_title: '', loc_address: '' })
          }
          break
        case 1:
          if (personLength > 0 &&
              this.formData.person[personLength - 1].relation !== '' &&
              this.formData.person[personLength - 1].name !== '' &&
              this.formData.person[personLength - 1].cardno !== '' &&
              this.formData.person[personLength - 1].loc_address !== '') {
            this.formData.person.push({ relation: '', name: '', cardno: '', loc_province: '', loc_city: '', loc_title: '', loc_address: '' })
          }
          break
        case 2:
          if (childrenLength > 0 &&
              this.formData.children[childrenLength - 1].relation !== '' &&
              this.formData.children[childrenLength - 1].name !== '' &&
              this.formData.children[childrenLength - 1].cardno !== '') {
            this.formData.children.push({ relation: '', name: '', cardno: '' })
          }
          break
      }
    },
    delBtn (type, index) {
      switch (type) {
        case 'address':
          this.formData.address.splice(index, 1)
          break
        case 'person':
          this.formData.person.splice(index, 1)
          break
        case 'children':
          this.formData.children.splice(index, 1)
          break
      }
    },
    submit () {
      this.insertPermitAddress()
      const personFlag = this.insertPermitPerson()
      const childrenFlag = this.insertPermitChildren()
      // console.log('三种状态', addressFlag, '-', personFlag, '-', childrenFlag)
      if (personFlag && childrenFlag) {
        this.doPerson()
        this.doChildren()
        console.log('内部提交方法成功')
        return { flag: true, tip: this.tip }
      } else {
        console.log('内部提交方法失败')
        return { flag: false, tip: this.tip }
      }
    },
    insertPermitAddress () {
      // 数据处理
      if (this.formData.address[0].loc_address !== '') {
        insertPermitAddress({ dataList: this.formData.address }).then(ret => {
          if (ret.data.errcode === 0) {
            console.log('插入地址成功', ret.data)
          } else {
            this.tip = 'address:' + ret.data.errmsg
          }
        })
      }
    },
    insertPermitPerson () {
      // 数据校验
      this.pFlag = false
      this.formData.person.forEach(item => {
        if (item.relation === '' && item.name !== '' && item.cardno !== '' && item.loc_address !== '') {
          this.tip = '探望人关系不能为空'
          this.pFlag = false
          return false
        } else if (item.relation !== '' && item.name === '' && item.cardno !== '' && item.loc_address !== '') {
          this.tip = '探望人姓名不能为空'
          this.pFlag = false
          return false
        } else if (item.relation !== '' && item.name !== '' && item.cardno === '' && item.loc_address !== '') {
          this.tip = '探望人身份证号不能为空'
          this.pFlag = false
          return false
        } else if (item.relation !== '' && item.name !== '' && item.cardno !== '' && item.loc_address === '') {
          this.tip = '探望人地址不能为空'
          this.pFlag = false
          return false
        } else if ((item.relation !== '' && item.name === '' && item.cardno === '' && item.loc_address === '') ||
                        (item.relation === '' && item.name !== '' && item.cardno === '' && item.loc_address === '') ||
                        (item.relation === '' && item.name === '' && item.cardno !== '' && item.loc_address === '') ||
                        (item.relation === '' && item.name === '' && item.cardno === '' && item.loc_address !== '')) {
          this.tip = '请检查探望亲人表单项'
          this.pFlag = false
          return false
        } else if (item.cardno !== '') {
          const rtn = identityCodeValid(item.cardno)
          if (!rtn.pass) {
            this.tip = '请检查探望亲人身份证格式'
            this.pFlag = false
            return false
          } else {
            this.pFlag = true
          }
        } else {
          this.pFlag = true
        }
        console.log('---人员处理', this.pFlag, '--', this.tip)
      })
      console.log('人员条件', this.cFlag, '==', this.pFlag)
      return this.pFlag
    },
    insertPermitChildren () {
      // 数据校验
      this.cFlag = false
      this.formData.children.forEach(item => {
        if (item.relation === '' && item.name !== '' && item.cardno !== '') {
          this.tip = '代办关系不能为空'
          this.cFlag = false
          return false
        } else if (item.relation !== '' && item.name === '' && item.cardno !== '') {
          this.tip = '代办姓名不能为空'
          this.cFlag = false
          return false
        } else if (item.relation !== '' && item.name !== '' && item.cardno === '') {
          this.tip = '代办身份证号不能为空'
          this.cFlag = false
          return false
        } else if ((item.relation !== '' && item.name === '' && item.cardno === '') ||
                        (item.relation === '' && item.name !== '' && item.cardno === '') ||
                        (item.relation === '' && item.name === '' && item.cardno !== '')) {
          this.tip = '请检查孩子代办表单项'
          this.cFlag = false
          return false
        } else if (item.cardno !== '') {
          const rtn = identityCodeValid(item.cardno)
          if (!rtn.pass) {
            this.tip = '请检查孩子代办身份证格式'
            this.cFlag = false
            return false
          } else {
            this.cFlag = true
          }
        } else {
          this.cFlag = true
        }
        console.log('---孩子处理', this.cFlag, '--', this.tip)
      })
      console.log('孩子条件', this.cFlag, '==', this.pFlag)
      return this.cFlag
    },
    doPerson () {
      if (this.formData.person[0].relation !== '' || this.formData.person[0].name !== '' || this.formData.person[0].cardno !== '' || this.formData.person[0].loc_address !== '') {
        console.log('人员条件成功')
        insertPermitPerson({ dataList: this.formData.person }).then(ret => {
          if (ret.data.errcode === 0) {
            console.log('插入亲人成功', ret.data)
          } else {
            // Toast.fail(ret.data.errmsg)
            this.tip = 'person:' + ret.data.errmsg
          }
        })
      }
    },
    doChildren () {
      if (this.formData.children[0].relation !== '' || this.formData.children[0].name !== '' || this.formData.children[0].cardno !== '') {
        console.log('孩子条件成功')
        insertPermitChildren({ dataList: this.formData.children }).then(ret => {
          if (ret.data.errcode === 0) {
            console.log('插入孩子成功', ret.data)
          } else {
            // Toast.fail(ret.data.errmsg)
            this.tip = 'children:' + ret.data.errmsg
          }
        })
      }
    },
    getMyInfo () {
      getUserLoginInfo().then(ret => {
      })
    }
  },
  mounted () {
    // 获取登录信息
    // this.getMyInfo()
    console.log('表单', this.formData)
  },
  watch: {
    tabIndex (val) {
      this.tabValue = val
    }
  }
}
</script>

<style scoped>
    .container {
        width: 96%;
        margin-left: 2%;
    }
    .address-box {
        text-align: left;
    }
    .address-placeholder {
        color: #969799;
    }
    .inner-box {
        margin-bottom: 10px;
    }
    .del-btn {
        margin-top: 20%;
    }
    /deep/ .van-tab {
        font-size: 0.775rem;
    }

    /deep/ .van-tabs__line {
        background-color: #4A9EFF;
    }

    /deep/ .van-tab--active {
        color: #4A9EFF;
    }

    .addBox {
        margin-top: 8px;
    }

    .div-bot {
        padding: 8px;
    }

    .div-bot .city-card-common-btn {
        color: white;
        font-size: 12px;
        padding: 10px 0;
        width: 100%;
        border-radius: 5px;
        text-align: center;
        background-color: #7AB46D;
        margin-bottom: 5px;
    }

    /deep/ .van-field__control {
        min-height: 28px !important;
        /*max-height: 60px !important;*/
    }
</style>
